<script setup lang="ts">
import type { ofPatientDataType } from '@/api/patient/type'
import { onMounted, ref } from 'vue'

import { useClientStore } from '@/store/modules/clientStore'
const clientStore = useClientStore()
// 路由
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

// 更新/新增就诊人表单
import { queryInfo, ofPatient } from '../composables/queryInfo'
// 表单校验
import { rules } from '../composables/validate'

import { getDictionaryAPI } from '@/api/common'
// 证件类型数据
const dictionayData = ref<any>([])
/** 获取证件类型 */
const getDictionary = async (dictCode: string) => {
  const { data: res } = await getDictionaryAPI(dictCode)
  if (res.code !== 200) return ElMessage.error(res.messsage)
  dictionayData.value = res.data
}

import { getDepartmentAPI } from '@/api/common'
import type { CascaderProps } from 'element-plus/es/components'
// 省市县/区数据
const props: CascaderProps = {
  lazy: true,
  async lazyLoad(node: any, resolve: any) {
    const result = await getDepartment(node.data.id)
    const showData = result.map((item: any) => {
      return {
        id: item.id,
        label: item.name,
        value: item.value,
        leaf: !item.hasChildren,
      }
    })
    resolve(showData)
  },
}
/**根据上级id获取子节点数据列表 */
const getDepartment = async (id: string | number = '86') => {
  const { data: res } = await getDepartmentAPI(id)
  if (res.code !== 200) return ElMessage.error(res.messsage)
  return res.data
}
onMounted(() => {
  if (route.query.id as string) {
    clientStore.getPatient(route.query.id as string)
  }
  getDictionary('CertificatesType')
})

/** 提交 */
const submit = () => {
  // 表单校验
  formRef1.value?.validate((validate) => {
    if (!validate) return
    // 表单校验
    formRef2.value?.validate(async (validate) => {
      if (!validate) return
      if (route.query.id as string) {
        queryInfo.id = Number(route.query.id as string)
      }
      const res = await clientStore.addOrUpdatePatient(queryInfo)
      if (res) {
        router.push('/user/patient/patient_list')
      }
    })
  })
}
import type { FormInstance } from 'element-plus/es/components/form'
const formRef1 = ref<FormInstance>()
const formRef2 = ref<FormInstance>()
const formRef3 = ref<FormInstance>()
/** 重写 */
const rewrite = () => {
  ofPatient.value = {} as ofPatientDataType
  formRef1.value?.resetFields()
  formRef2.value?.resetFields()
  formRef3.value?.resetFields()
}
</script>

<template>
  <!-- 添加就诊人|修改已有的就诊人信息的结构 -->
  <el-card>
    <el-divider content-position="left">就诊人信息</el-divider>
    <el-form :model="queryInfo" :rules="rules" style="width: 60%; margin: 10px auto" label-width="120" ref="formRef1">
      <el-form-item label="用户姓名" prop="name">
        <el-input placeholder="请你输入用户姓名" v-model="queryInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="certificatesType">
        <el-select placeholder="请你选择证件的类型" style="width: 100%" v-model="queryInfo.certificatesType">
          <el-option v-for="item in dictionayData" :key="item.id" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="certificatesNo">
        <el-input placeholder="请你输入证件号码" v-model="queryInfo.certificatesNo"></el-input>
      </el-form-item>
      <el-form-item label="用户性别" prop="sex">
        <el-radio-group v-model="queryInfo.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthdate">
        <el-date-picker v-model="queryInfo.birthdate" value-format="YYYY-MM-DD" type="date" placeholder="请你选择日期" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input placeholder="请你输入用户手机号码" v-model="queryInfo.phone"></el-input>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
    <el-form :model="queryInfo" :rules="rules" style="width: 60%; margin: 10px auto" ref="formRef2">
      <el-form-item label="婚姻状况" prop="isMarry">
        <el-radio-group v-model="queryInfo.isMarry">
          <el-radio :label="1">已婚</el-radio>
          <el-radio :label="0">未婚</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="自费/医保" prop="isInsure">
        <el-radio-group v-model="queryInfo.isInsure">
          <el-radio :label="1">自费</el-radio>
          <el-radio :label="0">医保</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="当前的住址" prop="addressSelected">
        <el-cascader :props="props" v-model="queryInfo.addressSelected" />
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input placeholder="请你输入用户详细地址" v-model="queryInfo.address"></el-input>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">联系人信息（选填）</el-divider>
    <el-form :model="queryInfo" style="width: 60%; margin: 10px auto" label-width="120" ref="formRef3">
      <el-form-item label="联系人姓名">
        <el-input placeholder="请你输入联系姓名" v-model="queryInfo.contactsName"></el-input>
      </el-form-item>
      <el-form-item label="联系人证件类型">
        <el-select placeholder="请你选择联系人证件的类型" style="width: 100%" v-model="queryInfo.contactsCertificatesType">
          <el-option v-for="item in dictionayData" :key="item.id" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人证件号码">
        <el-input placeholder="请你输入联系人证件号码" v-model="queryInfo.contactsCertificatesNo"></el-input>
      </el-form-item>
      <el-form-item label="联系人手机号码">
        <el-input placeholder="请你输入联系人手机号码" v-model="queryInfo.contactsPhone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="submit">提交</el-button>
        <el-button type="primary" size="default" @click="rewrite">重写</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style lang="scss" scoped></style>
